<template>
  <div class="app-container">
    <!-- 背景图案 -->
    <div class="background-pattern"></div>

    <!-- 页面内容 -->
    <div class="page-content">
      <!-- 你的页面内容 -->
    </div>
  </div>
</template>

<script setup>
// 逻辑代码
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.app-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* 添加宽度设置 */
  height: 100%; /* 添加高度设置 */
  background-image: url('@/assets/upload-page.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;   /* 确保背景在内容下方 */
}

.page-content {
  flex: 1;
  padding: 20px;
  position: relative;
  z-index: 1;  /* 确保内容在背景上方 */
}
</style>